<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      background: #f2f3f5;
      overflow: auto;
    }

    body {
      display: grid;
      grid-template-columns: repeat(12, 100px);
      grid-auto-rows: 100px;
      place-content: center;
      gap: 6px;
      height: 100vh;
    }

    .photo-item {
      width: 200px;
      height: 200px;
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      /* background-image: url('./img/1.jpg'); */
      background-size: 200px;
    }
  </style>
</head>

<body>

</body>
<script>
  function randomColor() {
    return '#' + Math.random().toString(16).substr(-6);
  }

  function randomNum() {
    // 取值范围在0到4
    return Math.floor(Math.random() * 8) + 1
  }

  let row = 1;
  let col = 1;
  for (let i = 0; i < 3 * 13; i++) {
    const div = document.createElement('div');
    div.className = 'photo-item';
    // div.style.backgroundColor = randomColor();
    // div.style.backgroundImage = `url('./img/${i % 5 +1 }.jpg')`
    div.style.backgroundImage = `url('./img/${randomNum()}.jpg')`
    div.style.gridRow = `${row} / ${row + 2}`;
    div.style.gridColumn = `${col} / ${col + 2}`;

    document.body.appendChild(div);
    col += 2;
    if (col > 11) {
      row += 1;
      col = row % 2 === 0 ? 2 : 1;
    }
  }
</script>

</html>